import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { TreeNode } from '@iux/live';

@Component({
  selector: 'app-show-line',
  templateUrl: './show-line.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  styles: [
    `
      .tree-container {
        box-sizing: content-box;
        width: 360px;
        padding: 16px;
        border: 1px solid #e6e6e6;
      }
    `,
  ],
})
export class ShowLineComponent implements OnInit {
  data: TreeNode[] = [
    {
      label: 'Documents',
      contentToggleIcon: 'icon-data-center',
      children: [
        {
          label: 'Doc File',
          contentToggleIcon: 'icon-storage',
          children: [
            {
              label: 'Dir 01',
              contentToggleIcon: 'icon-storage',
              children: [
                {
                  label: 'Expenses.doc',
                  contentToggleIcon: 'icon-storage',
                  isLeaf: true,
                },
                {
                  label: 'Resume.doc',
                  contentToggleIcon: 'icon-storage',
                  isLeaf: true,
                },
              ],
            },
            {
              label: 'Dir 02',
              contentToggleIcon: 'icon-storage',
              children: [
                {
                  label: 'Expenses.doc',
                  contentToggleIcon: 'icon-storage',
                  isLeaf: true,
                },
                {
                  label: 'Resume.doc',
                  contentToggleIcon: 'icon-storage',
                  isLeaf: true,
                },
              ],
            },
          ],
        },
        {
          label: 'PPT File',
          contentToggleIcon: 'icon-storage',
          children: [
            {
              label: 'Expenses.ppt',
              contentToggleIcon: 'icon-storage',
              isLeaf: true,
            },
            {
              label: 'Resume.ppt',
              contentToggleIcon: 'icon-storage',
              isLeaf: true,
            },
          ],
        },
      ],
    },
    {
      label: 'Word',
      contentToggleIcon: 'icon-data-center',
      children: [
        {
          label: 'Expenses.doc',
          contentToggleIcon: 'icon-storage',
          isLeaf: true,
        },
        {
          label: 'Resume.doc',
          contentToggleIcon: 'icon-storage',
          isLeaf: true,
        },
      ],
    },
    {
      label: 'Pictures',
      contentToggleIcon: 'icon-data-center',
      children: [
        {
          label: 'logo.png',
          contentToggleIcon: 'icon-storage',
          isLeaf: true,
        },
        {
          label: 'banner.pnd',
          contentToggleIcon: 'icon-storage',
          isLeaf: true,
        },
      ],
    },
  ];
  selection: TreeNode[];
  constructor() {}

  ngOnInit() {
    this.initData();
  }

  initData() {
    this.selection = [this.data[0].children[0].children[0].children[0]];
  }
}
